<template>
  <view>
    <view class="avatar">
      <u-avatar :text="isLogin ? email.slice(0, 1) : undefined"></u-avatar>
      <text class="text" @click="!isLogin ? toLogin() : undefined">{{isLogin ? email : '登录'}}</text>
    </view>
    <u-cell-group>
      <u-cell icon="order" title="我的订单" isLink></u-cell>
      <u-cell icon="star-fill" title="商品收藏" isLink></u-cell>
    </u-cell-group>
    <view class="btn-logout" v-if="isLogin">
      <u-button type="error" text="退出登录" @click="isShow = true"></u-button>
    </view>
    <u-modal title="提示" :show="isShow" @confirm="confirmLogout" @cancel="isShow = false" ref="uModal" :asyncClose="true"
      content="确认退出登录吗？" showCancelButton></u-modal>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapActions
  } from 'vuex'
  export default {
    data() {
      return {
        isShow: false
      };
    },
    computed: {
      ...mapGetters([
        'isLogin',
        'email',
      ])
    },
    methods: {
      ...mapActions([
        'Logout',
      ]),
      toLogin() {
        uni.$u.route({
          type: 'reLaunch',
          url: '/pages/login/index'
        })
      },
      confirmLogout() {
        this.Logout().finally(() => {
          this.isShow = false
        })
      }
    },
  };
</script>

<style lang="scss" scoped>
  .avatar {
    margin-bottom: 20px;
    padding: 0 15px;
    display: flex;
    align-items: center;

    >.text {
      margin-left: 10px;
    }
  }

  .btn-logout {
    margin-top: 40px;
  }
</style>